<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				display: flex;
				flex-direction:column ;								
				line-height: 50px;
				
			}
			h1{
				text-align: center;								
			}
			.biaodan{
				height: 540px;
				width: 600px;
				border: gainsboro;
				box-shadow: gainsboro  2px 2px 2px 2px;
				display: flex;
				flex-direction: column;
				align-content: center;
				margin-left: 15%;
				padding: 15%;
				padding-top: 5%;
				
			}
			.bt1 input{
				border: none;
				border-bottom:1px solid darkgrey;
				background-color:transparent; 
				outline: none;
			}
			.subject{
				border: 0;
			}
			.bt1{
				border:darkgrey;
			}
			

		</style>
	</head>
	<body>
		<h1>表单</h1>
		<div class="biaodan">		
			<div style="display:flex ;margin-left: -48px;">
			  <div style="text-align:right">	
				 <div class="" style="height: 22px;">
				 	<div class="bt1" style=" ">用户名：
				 		<input type="text"  name="" id="oUsername" value="" placeholder="请输入用户名" />
				 	</div>
				   <div class=""  style="margin-top:-51px;margin-right: -150px;"><input type="button" id="" value="校检用户名是否合法" />
				   </div>
				 </div>
		         <div class="bt1" style="margin-top: 22px;">密码：<input type="password" name="" id="oPassword" value="" placeholder="请输入密码" /></div>
			     <div class="bt1">请确认密码：<input type="password" name="" id="oPasswordAgain" value="" placeholder="请输入密码" /></div>
			  </div>
			</div>
	  
		  <div>性别：	
		  	<input type="radio" name="sex" id="oSexMale" value="female" />男
		    <input type="radio" name="sex" id="oSexFemale" value="male" />女
		  </div>
		  <div> 爱好：	
		  	<input type="checkbox" name="hobby" id="" name="hobby" value="first" />篮球
		    <input type="checkbox" name="hobby" id="" name="hobby" value="first" />跑步
			<input type="checkbox" name="hobby" id="" name="hobby" value="first" />游泳
		  </div>
		  <div  style="margin-left: -31.5px; outline: none; appearance: none;">专业技术：	
			<select  name="subject" class="subject">
			<option value="1">软件技术</option>
			<option value="2">小学教育</option>
			<option value="3">计算机科学与技术</option>
			<option value="4">金融工程</option>
			</select>
		  </div>
		  <div style="margin-left: -31px;" class="grjj">个人简介：</div>
		  <div class="bt1"><textarea name="" rows="10" cols="" style="width: 600px;height: 150px;"></textarea></div>
		  <div>头像：<input type="file" name="" id="" value="" /></div>
	
		  <div class="" style="display: flex; justify-content: center;margin-top: 10px;" >
			  <input type="button" onclick="getValue()" id="" value="提交" style="width: 90px;margin-right: 50px;" />
			  <input type="button" name="" id="" value="重置" style="width: 90px;" />
		  </div>
	
		</div>
	</body>
	<script type="text/javascript">
		function getValue() {
			let oUsername = document.getElementById('username')
			let usernameStr = oUsername.value
			console.dir(oUsername.value)
			let oPassword = document.getElementById('password')
			let oPasswordStr = oPassword.value
			console.dir(oPassword.value)
			let oPasswordAgain = document.getElementById('oPasswordAgain')
			let oPasswordAgainStr =oPasswordAgain.value 
			console.dir(oPasswordAgain.value)
			
			if(usernameStr.length===0){
				alert('请输入用户名')
				return
			}
				
				if(oPasswordStr.length===0){
				alert('请输入密码')
				return
			}
				
				if(oPasswordAgainStr.length===0){
				alert('两次密码输入不一致')
				return
			}
				
			console.log(usernameStr)
			console.log(oPasswordStr)
			console.log(oPasswordAgainStr)
//			let oSexMale = document.getElementById('SexMale')
//			let oSexFemale = document.getElementById('SexFemale')
//			if(oSexMale.checked){
//				console.log('性别：男')
//			}
//			if(oSexFemale.checked){
//				console.log('性别：女')
//			}
			let map = new Map();
			map.set("1",'男')
			map.set("2",'女')
			let oSex = document.getElementsByClassName('sex')
			let sexValue = ''
			for (var i=0;i<oSex.length;i++){
				if(oSex[i].checked){
					sexValue=oSex[i].value
				}
			}
			
			if(sexValue.length===0){
				console.log('未选中性别')	
			}else{
				console.log(map.get(sexValue))
			}
			let hobbyValueList = []
			let oHobby = document.getElementsByClassName('hobby')
			for(var i =0;i=oHobby.length;i++){
				
				if(oHobby[i].checked){
					hobbyValueList.push(oHobby[i].value)
				}
				
			}
			console.dir(hobbyValueList.join(','))
			
			let oSelect = document.getElementById('subject');
			let oOptions=oSelect.options
			let selectedIndex = oSelect.onselectIndex
			console.dir(oOptions[selectedIndex].value)
			
			let oMyInfo = document.getElementById('myInfo')
			console.dir(oMyInfo.value())
			
		}
	</script>
	
</html>
